import { ArrowRight } from '@nutui/icons-react-taro'
import { Cell, Checkbox, Col, Price, Row } from '@nutui/nutui-react-taro'
import { Image, Text, View } from '@tarojs/components'
import React from 'react'
import Icon from '../icon-font'
import './index.less'

interface Option {
  id: string | number
  name: string
  description?: string
  image: string
  price: number | string
  extra?: React.ReactNode
  colorStyle?: string
  area?: string | number
  style?: string
  packageId?: string
  snapShotId?: string
}

interface ProductCardProps {
  options: Option[]
  onChange?: (value: string[]) => void
  value?: string[]
  showExtra?: boolean
  onExtraClick?: (option: Option) => void
}
const ProductCard = ({ options, onChange, value, showExtra = false, onExtraClick }: ProductCardProps) => {
  const handleChange = (v: string[]) => {
    onChange && onChange(v)
  }

  return (
    <Cell className='product-card-container'>
      <Checkbox.Group style={{ width: '100%' }} onChange={handleChange} value={value}>
        {options.map((option, index) => (
          <Checkbox
            key={index}
            value={option.id}
            shape='button'
            label={
              <View className='product-checkbox'>
                <View className='product-card'>
                  <View className='product-card-content'>
                    <View>
                      <Image className='img' src={option.image} />
                    </View>
                    <View className='product-card-info'>
                      <Text>{option.name}</Text>
                      <Price price={option.price} size='small' thousands digits={0} />
                    </View>
                  </View>
                  {showExtra && (
                    <View
                      className='product-card-extra'
                      onClick={(e) => {
                        e.stopPropagation()
                        onExtraClick && onExtraClick(option)
                      }}>
                      <Text>定制套餐</Text>
                      <ArrowRight size={12} />
                    </View>
                  )}
                </View>
                <View className='divider'></View>
                {showExtra && (
                  <Row className='product-card-extra-info'>
                    <Col span={12}>
                      <View className='product-card-extra-info-item'>
                        <Icon name='wuyefei' size={14} />
                        风格: {option.style}
                      </View>
                    </Col>
                    <Col span={12}>
                      <View className='product-card-extra-info-item'>
                        <Icon name='youqigong' size={14} />
                        色调: {option.colorStyle}
                      </View>
                    </Col>
                    <Col span={12}>
                      <View className='product-card-extra-info-item'>
                        <Icon name='diban' size={14} />
                        面积: {option.area} m²
                      </View>
                    </Col>
                  </Row>
                )}
              </View>
            }
          />
        ))}
      </Checkbox.Group>
    </Cell>
  )
}
export default ProductCard
